<template>
  <div class="container">
    <van-popup v-model="show"
               class="edit-popup"
               position="right"
               :overlay="false">
      <editInfo @toggleEditPopup='onToggleEditPopup'></editInfo>
    </van-popup>
    <van-row type="flex"
             align="center">
      <van-col span="4">
        <img class="header-img"
             :src="user.headerImg || defaultHeader"
             alt="">
      </van-col>
      <van-col span="10"
               offset="2"
               class="username">
        {{user.account}}
      </van-col>

      <van-col span="8"
               offset="2">
        <van-button class="btn-edit"
                    size="mini"
                    @click="onToggleEditPopup(true)">编辑个人资料</van-button>
      </van-col>
    </van-row>
    <van-row type="flex"
             align="center">
      <van-col span="4">学号</van-col>
      <van-col span="10"
               offset='2'>{{user.schoolId}}</van-col>
    </van-row>
    <van-row type="flex"
             align="center">
      <van-col span="4">学校</van-col>
      <van-col span="10"
               offset="2">{{user.school}}</van-col>
    </van-row>
    <van-row type="flex"
             align="center">
      <van-col span="4">学院</van-col>
      <van-col span="10"
               offset="2">{{user.college}}</van-col>
    </van-row>
    <van-row type="flex"
             align="center">
      <van-col span="4">专业</van-col>
      <van-col span="10"
               offset="2">{{user.major}}</van-col>
    </van-row>
    <van-row type="flex"
             align="center">
      <van-col span="4">电话</van-col>
      <van-col span="10"
               offset="2">{{user.phone}}</van-col>
    </van-row>
    <van-row type="flex"
             align="center">
      <van-col span="4">email</van-col>
      <van-col span="10"
               offset="2">{{user.email}}</van-col>
    </van-row>
  </div>
</template>

<script>
import defaultHeader from '@/assets/default_header.png'
import { mapState } from 'vuex'
import editInfo from './components/editInfo'
export default {
  name: 'mine',
  data () {
    return {
      defaultHeader,
      show: false
    }
  },
  components: {
    editInfo
  },
  computed: {
    ...mapState({
      user: state => state.mine.user
    })
  },
  created () {
    this.handleUser()
  },
  methods: {
    onToggleEditPopup (value) {
      this.show = value
    },
    handleUser () {
      if (this.user.account === undefined) {
        this.show = true
      }
    }
  }
}
</script>

<style lang="sass">
.container
  .edit-popup
    width: 100%
    height: 100%
  .van-row
    padding-top: 16px
    .van-col--4
      text-align: right
      .header-img
        border-radius: 50%
        width: 36px
        height: 36px
      .username
        font-size: 26px
    .van-col--8
      .van-button--mini
        width: 100px
        height: 36px
        line-height: 36px
</style>
